<template>
  <div class="login">
    <div class="bg-top">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="content">
      <section class="login_container">
        <div class="login_container_appcode"></div>
        <div class="login_container_appdown">
          <span>请扫描上方二维码下载「 家巴啦APP 」</span>
        </div>
        <div class="login_container_mode" >
          <span @click="toLogin">登录</span>
          <span>|</span>
          <router-link to="/register">
            <span>注册</span>
          </router-link>
        </div>
      </section>
    </div>
    <div class="bg-bottom">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <jblFooter/>
  </div>
</template>

<script>
import jblFooter from '@/views/login/compoents/jblFooter'

export default {
  name: 'AppDownload',
  components: {
    jblFooter
  },
  data() {
    return {
    }
  },
  created() {
  },
  beforeRouteLeave(to, form, next) {
    next()
  },
  methods: {
    toLogin() {
      this.$router.push('/mobileLogin')
    }
  }
}
</script>
<style lang="scss" scoped>
  .login{
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    width:100%;
    min-width: 1080px;
    height:100vh;
    background: rgba(247,248,252,1);
     .bg-top{
      // position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .left{
        width:400px;
        height: 300px;
        background-image: url('../../../assets/images/1.gif');
        background-size: 100% 100%;
        background-position: center;
      }
      .right{
        position: absolute;
        right: 10%;
        top: -30px;
        width:100px;
        height:100px;
        background: linear-gradient(to bottom, #8DE9FC 0%,#16DBCC 100%);
        border-radius: 50%;
        animation: prog 1s ease-in 0s infinite alternate;
        }
        @keyframes prog
        {
          from {top: -30px;}
          to {top: 10px;;}
        }
    }
    .bg-bottom{
      z-index: 0;
      position: absolute;
      bottom: .8rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .left{
        position: absolute;
        left: 10%;
        bottom:0px;
        width:60px;
        height:60px;
        background: linear-gradient(to bottom, #8DE9FC 0%,#16DBCC 100%);
        border-radius: 50%;
        animation: progt 1s ease-in 0s infinite alternate;
        }
        @keyframes progt
        {
          from {bottom: 0px;}
          to {bottom: 20px;;}
        }
      .right{
        position: absolute;
        top: -500px;
        right: 0;
        width:150px;
        height: 250px;
        background-image: url('../../../assets/images/2.gif');
        background-size: 100% 100%;
        background-position: center;
      }
    }
    .content{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
    }
    &_container{
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      width:6rem;
      min-width:6rem;
      height:7.3rem;
      background:rgba(255,255,255,1);
      border-radius:20px;
      opacity:1;
      &_logo{
        margin-top:.80rem;
        width: 1.10rem;
        height: 1.10rem;
        background-image: url('../../../assets/images/logo.png');
        background-size: 100% 100%;
        background-position: center;
      }
      &_title{
        margin: .20rem 0 .03rem;
        font-size:.50rem;
        font-family:PingFang SC;
        font-weight:600;
        color:rgba(78,92,101,1);
        opacity:1;
      }
      &_tip{
        font-size:.36rem;
        font-family:PingFang SC;
        font-weight:400;
        line-height:.50rem;
        color:#4E5C65;
        letter-spacing:.05rem;
        opacity:1;
      }
      &_submit{
        cursor: pointer;
        margin-top:.60rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width:4.32rem;
        height:.80rem;
        font-size:.24rem;
        font-family:PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        // background:rgba(22,219,204,1);
        background:#16DBCC;
        box-shadow:0px 10px 25px rgba(22,219,204,0.15);
        opacity:1;
        border-radius:8px;
      }
      &_register{
        cursor: pointer;
        margin-top:.30rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width:4.32rem;
        height:.80rem;
        font-size:.24rem;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(179,185,199,1);
        background:rgba(247,248,252,1);
        opacity:1;
        border-radius:8px;
      }
      >p{
        margin-top:.80rem;
        font-size:.18rem;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(194,199,210,1);
        opacity:1;
      }
      &_appcode{
        width: 2.60rem;
        height: 2.60rem;
        background-image: url('../../../assets/images/app@2x.png');
        background-size: 100% 100%;
        background-position: center;
      }
      &_appdown{
        margin-top:.10rem;
        width:2.80rem;
        text-align: center;
        font-size:.28rem;
        font-family:PingFang SC;
        font-weight:600;
        line-height:.40rem;
        color:rgba(78,92,101,1);
        opacity:1;
      }
      &_mode{
        margin-top:.68rem;
        font-size:.24rem;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(179,185,199,1);
        opacity:1;
        span:nth-of-type(1),span:nth-of-type(3){
          cursor: pointer;
        }
        span:nth-of-type(2){
          margin:0 .30rem;
        }
      }
    }
  }
</style>
